<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9"  active-text-color="#409EFF" unique-opened router>


            <div class="user-info">
                <img src="../../assets/img/img.jpg" class="user-avator" alt />
                <!-- <div class="user-info-cont">
                    <div class="user-info-name">{{ name }}</div>
                    <div>{{ role }}</div>
                </div> -->
            </div>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
                                    threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index">{{ subItem.title
                            }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
import { selectMenusByUid } from '@/api'
export default {
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            collapse: false,
            items: [{ index: 'dashboard', title: '系统首页' ,icon:'el-icon-location'}],
            currentRoute: ''
        };
    },
    computed: {
        onRoutes() {
            if (this.$route.meta.isShowFatherRoute) {
                return this.currentRoute
            }
            this.currentRoute = this.$route.path.replace('/', '');
            return this.$route.path.replace('/', '');
        },
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData() {
            let result = await selectMenusByUid({ id: JSON.parse(localStorage.getItem('userInfo')).rid })
            if (result.code == 200) {
                const menuList = result.data
                this.items = [...this.items,...this.deepForEach(menuList)]
            }
        },
        deepForEach(arr, resultArray = []) {
            this.$_.forEach(arr, (value, key) => {
                const item = { index: value.path == '/' ? String(key) : value.path.slice(1), title: value.menusname, icon:value.icon}; //icon
                if (this.$_.isObject(value) && !this.$_.isArray(value) && value.children) {
                    item.subs = this.deepForEach(value.children);
                }
                resultArray.push(item);
            });
            return resultArray;
        }
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
    width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}

.sidebar>ul {
    height: 100%;
}

.user-info {
    display: flex;
    align-items: center;
    /* padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px; */
    margin-top: 10px;
}

.user-avator {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}
</style>
